<!--
 * @Description: 商品详情页面组件
 * @Author: hai-27
 * @Date: 2020-02-16 20:20:26
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-07 21:59:26
 -->
<template>
  <div id="details">
    <!-- 主要内容 -->
    <div class="main">
      <h3 class="title">{{infomationDetails.title}}</h3>
      <div class="time">{{infomationDetails.createTime|timestampToTime}}</div>
      <div class="content" v-html="infomationDetails.content">
      </div>
    </div>
    <!-- 主要内容END -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "", // 商品id
      infomationDetails: {}, // 商品详细信息
    };
  },
  // 通过路由获取商品id
  activated() {
    if (this.$route.query.id != undefined) {
      this.id = this.$route.query.id;
    }
  },
  watch: {
    // 监听商品id的变化，请求后端获取商品数据
    id: function(val) {
      this.getDetails(val);
    }
  },
  methods: {
    // 获取商品详细信息
    getDetails(val) {
      this.$axios
        .get("/api/information/getDetails", {
          params: {
            id: val
          }
        })
        .then(res => {
          this.infomationDetails = res.data.data
        })
        .catch(err => {
          return Promise.reject(err);
        });
    },
  }
};
</script>
<style>
/* 主要内容CSS */
#details .main {
  width: 1225px;
  height: 560px;
  padding-top: 30px;
  margin: 0 auto;
}
.main .title{
  font-size: 30px;
}
.main .time{
  font-size: 20px;
}

.main .title,
.main .time{
  text-align: center;
  line-height: 50px;
}
.main .content{
  padding: 20px;
  font-size: 20px;
}
/* 主要内容CSS END */
</style>
